<template>
  <div class="aboutpet">
    <div class="header">
      <h1 id="know">宠物信息</h1>
      <div id="search">
        <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input" @change="search">
        <input class="user-btn" type="button" value="搜索">
      </div>
    </div>
    <div class="float-button">
      <a href="javascript:window.scrollTo(0,0)">UP</a>
    </div>
    <div class="content">
      <div class="info">
        <div class="img1">
          <p class="written0">或风轻云淡，或刻骨铭心，
            您与宠物之间的关系，也可能有着千丝万缕的不同，
            或玩伴，或至交，或生活的依靠，亦或许，他可能只是你生命中的一个过客，
            但是，你却是它生命中的全部。</p>

        </div>
        <div class="img1 pic">
          <img src="../assets/images/1/a5.jpg">
        </div>
      </div>
      <div class="info">
        <div class="img2 pic" >
          <img src="../assets/images/1/a7.jpg">
        </div>
        <div class="contenter">
          <div>
            <p class="written">猫,属于猫科动物,是全世界家庭中较为广泛的宠物。家猫的祖先据推测是古埃及时期的沙漠猫,
              波斯的波斯猫,已经被人类驯化了3500年(但未像狗一样完全地被驯化)。
              一般的猫：头圆、颜面部短，前肢五指，后肢四趾，趾端具锐利而弯曲的爪，爪能伸缩，具有夜视性。
              以伏击的方式猎捕其它动物，大多能攀援上树。猫的趾底有脂肪质肉垫，以免在行走时发出声响，
              捕猎时也不会惊跑鼠。行进时爪子处于收缩状态，防止爪被磨钝，在捕鼠和攀岩时会伸出来。
            </p>
          </div>
          <div class="link">
            <router-link to="/petAbout">know more about</router-link>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="contenter">
          <p class="written">西伯利亚雪橇犬，常见别名哈士奇，
            昵称为二哈。西伯利亚雪橇犬体重介于雄犬20-27公斤,
            雌犬16-23公斤,身高大约雄犬肩高53-58厘米,雌犬51-56厘米,
            是一种中型犬。与金毛犬、拉布拉多并列为三大无攻击型犬类。
            被世界各地广泛饲养，并在全球范围内，有大量该犬种的赛事。西伯利亚雪橇犬是一种原始的古老犬种，因它的独特嘶哑的叫声被称之为当今的哈士奇。
            很早前哈士奇是最原始的交通工具专门拉雪橇的，并用这种狗猎取和饲养驯鹿，或者繁殖这种狗，然后带出他们居住的冻土地，换取温饱。典型狼性犬。
          </p>
          <div class="link">
            <router-link to="/petAbout">know more about</router-link>
          </div>
        </div>
        <div class="img2 pic">
          <img src="../assets/images/1/a11.jpg">
        </div>

      </div>
      <div class="info">
        <div class="img2 pic">
          <img src="../assets/images/1/a1.jpg">
        </div>
        <div class="contenter">
          <p class="written">哈瓦那犬是一种坚强的短腿小型犬， 具有柔软而厚密的未经修剪的毛发。
            它的多毛尾巴弯曲翘向后背， 是一种富有感情令人喜欢的犬，
            活泼可爱， 步态富有弹性。 原产古巴。起源于18世纪。
            据说是水手从加那利群岛带到古巴的。在美国很受欢迎。哈瓦那犬是比公犬家族中的一个古老品种,
            最早提到哈瓦那犬的祖先可追溯到地中海地区的波利尼斯时代(23~79B.C.），并且该品种可能起源于马耳他岛。在西班牙和意大利的犬可能有一部分就来自哈瓦那犬，
            、而且人们已称之为哈瓦那犬。
          </p>
          <div class="link">
            <router-link to="/petAbout">know more about</router-link>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import axios from "axios"
  export default {
    data() {
      return {
        input: '',
        index: 0,
        info: []
      }
    },
    mounted() {
      var _this = this;
      axios.get("http://localhost:3000/api/petAbout")
        .then(res => {
          console.log("获取数据成功");
          console.log(res);
          _this.info = res.data;
          console.log(_this.info)

        })
        .catch(err => {
          console.log('获取数据失败' + err);
        })

    },
    methods: {
      search() {
        let _this = this;
        if (_this.input == '') {
          console.log('搜索空字符');
          _this.$router.go(0);
        }
        else {
          console.log('搜索' + _this.input);
          _this.$router.push('/petAbout');

        }
      }

    }
  }
</script>

<style scoped>
  .aboutpet {
    min-width: 100%;
    display: flex;
    /* height: 2000px; */
    /* width: 100%; */
    /* border: solid black 3px; */
    flex-direction: column;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }

  .user-input {
    width: 90%;
    height: 100%;
    border: 2px solid rgba(246, 255, 0, 0.86);
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
    text-indent: 10%;
    font-size: 150%;
    font-family: 楷体;
  }

  .user-btn {
    width: 60%;
    height: 90%;
    border: none;
    border-radius: 5px;
    background: rgba(251, 255, 0, 0.874);
    vertical-align: middle;
    outline: none;
    color: white;
    font-size: 160%;
    font-family: 楷体;
  }

  #search {
    display: flex;
    float: right;
    margin-top: 1%;
  }

  #know {

    display: flex;
    float: left;
    margin-top: 1%;
    margin-left: 3%;
    font-family: 楷体;
    color: pink;
    font-weight: bolder;

  }

  .float-button {
    position: fixed;
    /* height: 10%; */
    width: 5%;
    bottom: 0px;
    right: 0px;
    border-radius: 50px;
    line-height: 450%;
    text-align: center;
    background: #f7f31045;
    z-index: 1;
  }

  .content {
    display: flex;
    /* height: 2000px; */
    width: 100%;
    /* border: solid black 3px; */
    flex-direction: column;
    margin-bottom: 5%;
    margin-top: -5px;
  }

  .info {
    display: flex;
    height: 450px;
    border: solid rgba(255, 192, 203, 0.178) 1px;
    justify-content: center;
    margin-top: 3%;
    border-radius: 50px;
    background-color: rgba(255, 192, 203, 0.14);
    margin-left: 20px;
    margin-right: 20px;
  }

  .info:hover {
    box-shadow: 0px 0px 20px #888888;
  }

  .img1 {
    height: 300px;
    width: 100px;
    border-radius: 80px;
    overflow: hidden;
    margin-top: 40px;
    /* 动画持续时间 */
    animation-duration: 5s;
    animation-name: slidein;
    /* 无限次循环 */
    animation-iteration-count: infinite;
    /* 逆向交替循环 */
    animation-direction: alternate;
  }
/* 创建滑行动画 */
  @keyframes slidein {
    from {
      margin-left: 100%;
      width: 500px;
    }

    to {
      margin-left: 0%;
      width: 500px;
    }

  }

  .img2 {
    display: flex;
    height: 300px;
    width: 300px;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 7%;
    margin-left: 7%;
    margin-top: 60px;

  }
/* 创建旋转动画 */
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

 
    .img2 {
      /* 匀速 */
      animation: spin infinite 25s linear;
    }
  

  .contenter {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 500px;
    /* border: solid rgba(0, 0, 0, 0.392) 3px; */
    border-radius: 40px;
    box-shadow: 10px 10px rgba(0, 0, 0, 0.477);
  }

  .written {
    font-family: 幼圆;
    font-weight: bolder;
    font-size: larger;
    line-height: 150%;
    margin-top: 10%;
    color: rgb(127, 187, 255);
  }

  .written0 {
    font-family: 楷体;
    font-weight: bolder;
    font-size: x-large;
    line-height: 150%;
    margin-top: 10%;
    color: rgb(248, 14, 209);
  }

  .link {
    right: 0;
    margin-bottom: 0;
    /* border: solid black 1px; */
    text-align: right;
  }

  @media screen and (max-width:768px){
            /* 手机屏幕 */
    .header{
      width: 100%;
    }
   
    .pic{
      display: none;
    }
    .info{
      zoom:0.6;
    }
    .float-button{
     zoom:0.8;
       height: 5%;
       line-height: 250%;
    }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */
   .info{
      zoom:0.8;
    }
    }
</style>